<template>

	<div class="block">
		<el-carousel indicator-position="outside" v-show="ff">
			<el-carousel-item v-for="item in itemimg" :key="item">
				<img v-bind:src="item.url" width="1309px" height="369px">
			</el-carousel-item>
		</el-carousel>

		<div id="-css-">
			<div id="sousuo">
				<el-input v-model="queryInfo.query" placeholder="请输入内容" style="width: 400px;" ></el-input>
				<el-button type="primary" icon="el-icon-search" @click="find()">搜索</el-button>

				<div id="app" v-show="f">
					<el-table :data="booklist" border stripe>
						<el-table-column label="#" type="index"></el-table-column>
						<el-table-column label="书号" prop="id"></el-table-column>
						<el-table-column label="书名" prop="name"></el-table-column>
						<el-table-column label="封面" width="180">
							<template slot-scope='scope'>
								<img v-bind:src="require('@/assets/'+scope.row.name+'.jpg')" @error="require('@/assets/111.jpg')" style="height: 125px; width: 85px;" />
								
							</template>
						</el-table-column>
						<el-table-column label="出版社" prop="press"></el-table-column>
						<el-table-column label="是否在馆">
							<template slot-scope='scope'>
								<p>{{scope.row.exist==0?"是":"否"}}</p>
							</template>
						</el-table-column>
						<el-table-column label="作者" prop="author"></el-table-column>
						<el-table-column label="藏馆地址" prop="address"></el-table-column>
						
					</el-table>
					<!-- 分页区域 -->
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="queryInfo.pagenum" :page-sizes="[2, 5,10]" :page-size="queryInfo.pagesize"
						layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
		<el-dialog title="搜索结果" :visible.sync="addialogVisible" width="50%">
			<el-form :model="notice" :rules="addFormrules" ref="addFormref" label-width="70px">
				<el-form-item label="名称" label-width="100px" prop="title">
					<el-input v-model="notice.title" style="width: 250px;"></el-input>
				</el-form-item>
				<el-form-item label="内容">
					<el-input type="textarea" v-model="notice.content"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addialogVisible=false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				queryInfo: {
					query: '',
					pagenum: 1,
					pagesize: 10
				},
				itemimg: [ {
					url: require("../../assets/4.jpg")
				}, {
					url: require("../../assets/5.jpg")
				}, {
					url: require("../../assets/6.jpg")
				}],
				value: '',
				input: '',
				addialogVisible: false,
				notice: [],
				f: false,
				booklist: [],
				total: 0,
				ff:true
			}
		},
		methods: {
			getBookList() {
				this.$http.post("http://localhost:8989/book", this.queryInfo).then(res => {
					console.log(res.data);
					if (res.data.status == 1) return this.$message.error("暂无相关图书");
					if (res.data.status !== 200) return this.$message.error("获取图书列表失败");
					this.booklist = res.data.data.list;
					console.log(this.booklist);
					this.total = res.data.total;
				}).catch(e => {
					console.log(e);
				})
			},
			handleSizeChange(newSize) {
				console.log(newSize);
				this.queryInfo.pagesize = newSize;
				this.getBookList();
			},
			handleCurrentChange(newPage) {
				console.log(newPage);
				this.queryInfo.pagenum = newPage;
				this.getBookList();
			},
			find() {
				this.ff=false;
				this.f = true;
				this.getBookList();
				
			},
			handleSizeChange(newSize) {
				console.log(newSize);
				this.queryInfo.pagesize = newSize;
				this.find();
			},
			handleCurrentChange(newPage) {
				console.log(newPage);
				this.queryInfo.pagenum = newPage;
				this.find();
			}

		}
	}
</script>
<style scoped="scoped">
</style>
